<template>
	<view class="app">
		<view class="Setting">
			<AppNavbar :bgColor="'#ededed'" title="Set up" titlecolor="#000" leftIconColor="#000" fontWeight="600">
			</AppNavbar>
			<mySettings :list="abilitys" class="mt-2 font-weight-600"></mySettings>
			<mySettings :list="abilitys2" class="mt-4 font-weight-600"></mySettings>

			<up-overlay :show="codeShow" @click="click" class="flex-center">
				<view class="warp flex-center flex-column">
					<text class="mb-3 color-fff f-size-18">请输入验证码</text>
					<up-code-input v-model="code" @finish="finish" v-if="codeShow" bold borderColor="#fff" :focus="true"
						color="#fff"></up-code-input>
				</view>

			</up-overlay>

		</view>

	</view>
</template>

<script setup>
	// import mySettings from '/components/my-settings.vue';
	import {
		exitAccountApi
	} from '@/api/account.js'
	import {
		getEmailCodeApi
	} from '@/api/common.js'
	import {
		reactive,
		ref
	} from 'vue';
	const codeShow = ref(false)
	const code = ref('')
	const emailCode = ref('')
	const abilitys = reactive([{
			label: "Account  security",

			url: '/pages/Setting/Account'
		},
		{
			label: "Password management",

			url: "/pages/Setting/PasswordManagement"
		}

	])
	const abilitys2 = reactive([{
			label: "Message motification",
			url: "/pages/Setting/MessageNotification"

		},
		{
			label: "Exit App",

			click: () => {
				uni.showModal({
					title: "tips",
					cancelText: "cancel",
					confirmText: "confirm",
					content: "Are you sure exit",
					success: async ({
						confirm
					}) => {
						if (confirm) {

							uni.$to("/pages/login/login")
							proxy.$store.commit('userStore/clearUserStore')
							uni.clearStorage()
						}
					}
				})
			}

		},
		{
			label: "Delete account",
			click: () => {
				uni.showModal({
					title: "tips",
					cancelText: "cancel",
					confirmText: "confirm",
					content: "Are you sure delete this account",
					success: async ({
						confirm
					}) => {
						if (confirm) {
							let email = uni.getStorageSync('userInfo').userEmail
							getEmailCodeApi({
								email: email
							}).then(res => {
								emailCode.value = res.data
							})
							codeShow.value = true
						}
					}
				})
			}

		},
	])

	function finish(val) {
		console.log(val);
		exitAccountApi({
			smsCode: emailCode.value
		}).then(res => {

			uni.tools.showTips('注销成功', () => {
				goto('/pages/login/login')
			})
		}).catch(err => {
			uni.tools.showTips('请输入正确的验证码')
		})
	}

	function click() {
		codeShow.value = false
		code.value = ''
	}

	function goto(url) {
		uni.$to(url)
	}

	function addDeviceFun() {

	}
</script>

<style lang="scss" scoped>
	.app {
		.Setting {

			// border: 1px solid red;
			background-color: #ededed;


			.Setting-abilitys {
				// border: 1px solid red;
				background-color: #fff;

				.Setting-ability-item {
					flex-wrap: wrap;

					.Setting-ability-item-left {
						image {
							width: 45rpx;
							height: 45rpx;
						}
					}

					.Setting-ability-item-detail {
						width: 40rpx;
						height: 40rpx;
					}
				}
			}
		}
	}
</style>